<template>
  <div>
    <a-modal
      title='编辑'
      :visible="visible"
      :confirmLoading="confirmLoading"
      destroyOnClose
      @cancel="cancel"
      @ok="handleOk"
    >
      <a-form
        ref="ruleForm"
        :form="form"
        :label-col="{span:4}"
        :wrapper-col="{span:19}"
        layout="horizontal"
      >
        <a-form-item label="配置值">
          <a-input
            id="title"
            v-decorator="['value',
              {
                initialValue:record.value,
                rules: [{ required: true,message:'配置值不能为空' }]
              }
            ]"
            placeholder="请输入配置值..."
          />
        </a-form-item>
        <a-form-item label="说明">
          <a-textarea
            :rows="4"
            v-decorator="['remark',
              {
                initialValue:record.remark,
              }
            ]"
            placeholder="请输入说明内容..."
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { saveRequest, updateRequest } from '@/api/app-manage'
import store from '@/store'
import { message } from 'ant-design-vue'

export default {
  name: 'appEditAdd',
  props: ['visible', 'record', 'type'],
  data() {
    return {
      form: this.$form.createForm(this),
      confirmLoading: false,
      modalVisible: false,
      previewVisible: false,
      previewImage: '',
      fileList: []
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val
    }
  },
  methods: {
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          const params = {
            value: values.value,
            remark: values.remark,
            userId: store.getters.userInfo?.userId
          }
          // 如果是修改需要新增这两个参数
          if (!this.type) {
            params.id = this.record.id
            params.uuid = this.record.uuid
          }
          let api = this.type ? saveRequest : updateRequest
          api(params).then(res => {
            this.confirmLoading = false
            if (res.code === 200) {
              message.success(res.msg || '操作成功！')
              this.$emit('onOk', this.type ? 'add' : 'edit')
            }
          })
        }
      })
    },
    cancel() {
      this.resetFormValue()
      this.$emit('cancel')
    },
    // 重置表单一般在第一次访问表单时进行重置
    resetFormValue() {
      this.$nextTick(() => {
        this.form.resetFields()
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>